<template>
    <div class="box">
        <van-nav-bar title="车辆检测-基础信息" class="navBar" left-arrow @click-left="back()"></van-nav-bar>
        <div class="container">
            <!-- <van-cell-group inset class="importCar">
                <van-button type="success" size="small">导入店内车辆</van-button>
                <van-icon name="arrow" color="#8195A5"/>
            </van-cell-group> -->
            <van-form @submit="next">
                <div class="formContent">
                    <h3>客户信息</h3>
                    <van-cell-group inset class="baseMsg">
                        <van-field
                            v-model="state.name"
                            name="姓名"
                            label="姓名:"
                            placeholder="姓名"
                            :rules="[{ required: true, message: '请填写姓名' }]"
                        />
                        <span style="color:red">*</span>
                        <van-field
                            v-model="state.open_phone"
                            type="phone"
                            name="手机号"
                            label="手机号:"
                            placeholder="手机号"
                            :rules="[{ required: true, message: '请输入正确的手机号',pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/}]"
                        />
                        <span style="color:red">*</span>
                    </van-cell-group>

                    <h3>车辆信息</h3>
                    <van-cell-group inset>
                        <van-field
                            v-model="state.detection_license_num"
                            name="车牌号"
                            label="车牌号:"
                            placeholder="车牌号"
                            :rules="[{ required: true, message: '请输入正确的车牌号',pattern:/^([京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][1-9DF][1-9ABCDEFGHJKLMNPQRSTUVWXYZ]\d{3}[1-9DF]|[京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][\dABCDEFGHJKLNMxPQRSTUVWXYZ]{5})$/}]"
                        >
                            <template #button>
                                <van-button size="mini" type="warning" class="search" @click="queryCarInfo()">查询车辆详情</van-button>
                            </template>
                        </van-field>
                        <van-field
                            v-model="state.detection_license_model"
                            name="车型"
                            label="车型:"
                            placeholder="车型"
                            :rules="[{ required: true, message: '请填写车型' }]"
                        />
                        <van-field
                            v-model="state.detection_vin"
                            name="车架号"
                            label="车架号"
                            placeholder="车架号"
                            :rules="[{ required: true, message: '请填写车架号' }]"
                        />
                        <van-field
                            v-model="state.detection_board"
                            readonly
                            clickable
                            name="calendar"
                            label="上牌时间"
                            placeholder="点击选择日期"
                            @click="state.showCalendar = true"
                        />
                        <van-calendar v-model:show="state.showCalendar" @confirm="onConfirm" :max-date="state.maxDate" :min-date="state.minDate"/>
                    </van-cell-group>
                </div>
                <footer>
                    <van-button native-type="submit" color="rgba(94, 47, 136, 1)">下一步</van-button>
                    <div class="bar"></div>
                </footer>
            </van-form>
        </div>
    </div>
</template>
<script setup>
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {selectCarInfoByCarNum} from 'api/car.js'
import { Toast } from "vant";

const state = reactive({
    name: '', open_phone: '',
    showCalendar: false,
    detection_license_model: '',
    detection_license_num: '',
    detection_vin:'',
    detection_board:'',
    minDate:new Date(1990,11,1),
    maxDate:new Date()
})
const router = useRouter()
const store = useStore()

onMounted(()=>{
    store.commit('testing/clearFixList');
})

const onConfirm = (date) => {
    state.detection_board = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    state.showCalendar = false;
};

//查询车辆详情
const queryCarInfo = async () => {
    let res = await selectCarInfoByCarNum(state.detection_license_num)
    if(res.code==0){
        let c = res.data.result[0];
        state.detection_vin=c.car_vin //车架号
        state.detection_license_model= c.amMainBrandName +" "+c.amSeriesName//车型
        state.detection_board= c.marketDate//上牌时间
    }else{
        Toast.fail("无此车牌号")
    }
}

const next = () => {
    console.log(state)
    store.commit('testing/saveCarInfo',state)
    router.push('/testing/report')
}
const back = () => {
    router.back();
}
</script>
<style lang="scss" scoped>
.box{
    background: #F1F5F8;
    height: 100vh;
    .navBar{
        background: #fff;
    }
    .container{
        background: #F1F5F8;
        
        overflow: hidden;
        .importCar{
            height: 3.4375rem /* 55/16 */;
            background: #FFFFFF;
            border-radius: .625rem /* 10/16 */;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding:0 .9375rem /* 15/16 */;
            button{
                background: transparent;
                border:none;
                font-size: 1rem /* 16/16 */;
                font-family: PingFang SC;
                font-weight: 500;
                color: #101D34;
                line-height: 1.125rem /* 18/16 */;
            }
        }
        .formContent{
            padding:.9375rem /* 15/16 */;
        }
        .baseMsg{
            position: relative;
            span:nth-of-type(1){
                position: absolute;
                top: .625rem /* 10/16 */;
                left: 3.4375rem /* 55/16 */;
            }
            span:nth-of-type(2){
                position: absolute;
                top: 3.75rem /* 60/16 */;
                left: 4.375rem /* 70/16 */;
            }
        }
        .search{
            font-size: 1rem /* 16/16 */;
            font-family: PingFang SC;
            font-weight: 400;
            color: #5E2F88;
            background: transparent;
            border:none;
        }
        h3 {
            text-align: left;
            text-indent: 0.4rem /* 30/75 */;
            margin: 16px 0;
        }
        .submitBtn{
            margin-top:2.5rem /* 40/16 */;
            button{
                width: 18.125rem /* 290/16 */;
                height: 2.75rem /* 44/16 */;
                background: linear-gradient(10deg, #5E2F88, #694AA5);
                border-radius: 1.375rem /* 22/16 */;
                border:none;
                margin:auto;
            }
        }
    }
}

footer {
    width: 100%;
    height: 5.625rem /* 90/16 */;
    background: #FFFFFF;
    box-shadow: 0px -10px 32px 8px rgba(0, 0, 0, 0.03);
    border-radius: .9375rem /* 15/16 */ .9375rem /* 15/16 */ 0px 0px;
    position: fixed;
    bottom: 0;
    text-align: center;
    button{
        width: 18.125rem /* 290/16 */;
        height: 2.75rem /* 44/16 */;
        margin-top:1.25rem /* 20/16 */;
        border:none;
        outline: none;
        border-radius: 1.375rem /* 22/16 */;
    }
    .bar{
        width: 8.375rem /* 134/16 */;
        height: .3125rem /* 5/16 */;
        background: #000000;
        border-radius: .15625rem /* 2.5/16 */;
        margin:13px auto 0;
    }
}
.van-calendar {
    height: 50%;
}
.van-cell-group{
    margin: 0!important;
}
</style>
<style scoped>
.container /deep/ .van-field__label{
    font-size: 1rem /* 16/16 */;
    font-family: PingFang SC;
    font-weight: 500;
    color: #101D34;
}
.container /deep/ .van-cell{
    min-height: 3.125rem /* 50/16 */;
    align-items: center;
    line-height:1.125rem /* 18/16 */;
}
</style>